<script setup lang="ts">
import { reactive, ref, onMounted, onUnmounted } from "vue";

import router from "@/router";
import user from "@/store/user";
import { uploadImage } from "@/service/file";

import { ElMessageBox } from "element-plus";
import { Back, SwitchButton } from "@element-plus/icons-vue";

import OperateArticle from "./Child/OperateArticle.vue";
import HeaderUserInfo from "@/components/Header/Child/HeaderUserInfo.vue";

import local from "@/utils/local";
const target = ref();
const userStore = user();
const isShow = ref(false);
const article = reactive({
  content: "",
  title: ""
});
// 退出登录
const logout = () => {
  local.delete("pinia-userStore");
  userStore.$reset();
  router.push("/");
};

// 上传图片
const handleUploadImage = async (
  event: Event,
  insertImage: any,
  files: any
) => {
  // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
  const formData = new FormData();
  for (let i in files) {
    formData.append("file", files[i]);
    formData.append("id", userStore.userInfo?.id + "");
  }
  const res: any = await uploadImage(formData);
  insertImage({
    url: `${res.data.cover}`
  });
};
// 退出
const goBackClick = () => {
  ElMessageBox.confirm("确认返回上一个页面?", "退出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    router.go(-1);
    local.delete("edit-article");
  });
};
// 钩子

onMounted(() => {
  const res = local.get("edit-article");
  if (res) {
    article.content = res.content;
    article.title = res.title;
  }
});
onUnmounted(() => {
  local.delete("edit-article");
  console.log("卸载");
});
</script>

<template>
  <div class="writeArticle-container">
    <header class="header">
      <el-button size="small" @click="goBackClick" :icon="Back"></el-button>
      <input
        type="text"
        class="input"
        v-model="article.title"
        placeholder="请输入文章标题..."
      />
      <el-button
        style="margin: 0 10px"
        type="primary"
        @click.prevent.stop="isShow = !isShow"
        >发布文章</el-button
      >

      <HeaderUserInfo :show-user="true"></HeaderUserInfo>
    </header>
    <v-md-editor
      :disabled-menus="[]"
      v-model="article.content"
      mode="editview"
      @upload-image="handleUploadImage"
      left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save tip emoji todo-list"
    ></v-md-editor>

    <OperateArticle
      @cancelIssue="isShow = false"
      :content="article.content"
      :title="article.title"
      :show="isShow"
    />
  </div>
</template>

<style scoped lang="less">
.writeArticle-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;

  .header {
    display: flex;
    align-items: center;
    height: 63px;
    line-height: 63px;
    margin: 0 20px;
    .input {
      width: 90%;
      height: 100%;
      outline: none;
      border: 0;
      margin-left: 20px;
      font-size: 20px;
      padding-right: 30px;
      &::placeholder {
        font-size: 20px;
      }
    }
    .img {
      width: 32px;
      height: 32px;
      margin: 0 20px -20px;
      border-radius: 20px;
      cursor: pointer;
    }
    .operate-content {
      position: absolute;
      top: 60px;
      right: 10px;
      width: 125px;
      text-align: center;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
      background-color: #fff;
      z-index: 9999;
      span {
        display: inline-block;
        border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
        color: rgb(70, 70, 70);
        height: 30px;
        line-height: 30px;
        user-select: none;
        cursor: pointer;
        &:hover {
          color: #000;
        }
      }
    }
  }
  .v-md-editor {
    height: 100%;
    padding-bottom: 50px;
  }
  :deep(.v-md-editor__editor-wrapper) {
    border-right: 5px solid #ccc;
    padding: 0 15px;
  }
  :deep(.v-md-editor__preview-wrapper) {
    padding: 0 20px;
  }
}
</style>
